<template>
  <div class="right">
    <div class="rightItem">
      <div class="sboxtitle">
        <h3>推荐阅读</h3>
      </div>
      <ul class="recommendRead">
        <li
          v-for="index in 5"
          :key="index"
          @click="goDetail(index)"
        >
          <img
            v-if="index % 2"
            src="@/assets/img/test/test.jpg"
          >
            <img
              v-else
              src="@/assets/img/test/test1.jpg"
            >
              <p v-if="index % 2">慕课网-Java架构师体系课：跟随千万级项目从0到100全过</p>
              <p v-else>从Java后端到全栈7七月老师亲授职场大课</p>
              </li>
      </ul>

    </div>
    <div class="rightItem">
      <div class="sboxtitle">
        <h3>热门主题</h3>
      </div>
      <ul class="hotTheme">
        <li
          v-for="index in 10"
          :key="index"
        >
          <span class="num">{{index}}</span>
          <p>Python Flask快速入门与进阶</p>
          </li>
      </ul>
      <div class="sboxtitle">
        <h3>广而告之</h3>
      </div>
      <div class="adBox">
        <a href="#">
          <img src="@/assets/img/test/ad1.png">
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightModal',
  data() {
    return {}
  },
  mounted() {},
  methods: {
    goDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>
<style lang="scss">
.right {
  float: right;
  width: 278px;
  .rightItem {
    margin-bottom: 10px;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #e3e5e8;
    .sboxtitle {
      padding: 16px 20px;
      h3 {
        font-weight: 100;
        height: 18px;
        line-height: 18px;
        font-size: 16px;
      }
    }
    .recommendRead {
      padding: 0 20px 6px;
      li {
        height: 60px;
        padding: 15px 0 0;
        margin-bottom: 15px;
        overflow: hidden;
        border: 1px solid #eee;
        border-width: 1px 0 0;
        display: flex;
        img {
          width: 80px;
          height: 60px;
          border-radius: 3px;
          margin-right: 10px;
          @include imgHover();
        }
        p {
          flex: 1;
          font-size: 14px;
          color: #666;
          @include textHover();
        }
      }
    }
    .hotTheme {
      padding: 0 20px 6px;
      li {
        display: flex;
        margin-bottom: 14px;
        cursor: pointer;
        .num {
          width: 21px;
          text-align: center;
          line-height: 20px;
          margin: 1px 10px 0 0;
          background-color: #eee;
          font-size: 12px;
          border-radius: 3px;
        }
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          .num {
            color: #fff;
            background-color: #24292c;
          }
        }
        p {
          flex: 1;
          font-size: 14px;
          color: #666;
          @include textOverflow();
          @include textHover();
        }
      }
    }
    .adBox {
      padding: 0 20px 20px;
      img {
        width: 100%;
        border-radius: 3px;
      }
    }
  }
}
</style>
